<template>
	<view class="sidebar-page">
		<navigator url="/pages/login/login" class="login">
			<image class="image" src="../../static/avatar/login.png" mode=""></image> <!--用户应该是../../static/user/账号文件夹/头像-->
			<view class="username">
				账户登录
			</view>
		</navigator>
		<!--
		<view class="login">
			<image src="../../static/avatar/login.png" mode=""></image> 
		</view>
		-->
		<!--功能列表-->
		<view class="functions" v-for="(item,index) in funclist" :key="index">
			<view class="nav-item">
				<image  class="image"  :src="item.icon" mode=""></image> 
				<text>{{item.name}}</text>
			</view>
		</view>
		<scroll-view class="historys" enable-flex="true">
			<view v-if="information.historys.length>0">
				<view  v-for="(item,index) in information.historys" :key="index">
					<view class="historys-item">
						<text class="SessionTitle">{{item.title}}</text>
						<text  class="SessionTime">{{item.time}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"sidebar",
		data() {
			return {
				//功能列表
				funclist: [
				        {
				          name: "创建新会话",
				          icon: '../../static/avatar/create.png' // 假设创建新会话图标路径
				        },
						{
						  name: "待扩展功能1",
						  icon: '../../static/avatar/create.png' // 假设创建新会话图标路径
						},
						{
						  name: "待扩展功能2",
						  icon: '../../static/avatar/create.png' // 假设创建新会话图标路径
						}
				      ]
			};
		},
		props:{
			//账户信息
			information:{
							type:Object,
							default: {
							        ID: "",
							        username: "",
							        phone: "",
							        historys: [
							          {
							            title: "什么是uniapp?",
							            meg: {},
							            time: "2024/10/8 13:08"
							          },
									  {
									    title: "侧边栏模块终于完工啦！",
									    meg: {},
									    time: "2024/10/8 16:40"
									  }
							          // 更多历史记录
							        ]
							      },
							required:false
						}
		},
		//挂载到实例
		mounted(){
			
		},
		methods:{
			/* 检查登录状态*/
			//CheckLogin(){
				/*
				1 未登录：弹出登录窗口：这里使用登录组件login
				2已经登录使用token建立长轮询
				*/
			//},
			/**/
			WebsocketConnect() {
			      var ws = uni.connectSocket({
			        url: "wss://your-server-url",
			        header: {
			          'content-type': 'application/json',
			          'Authorization': 'Bearer '/* + this.token*/
			        },
			        success: function() {
			          console.log("WebSocket连接成功！");
			        },
			        fail: function(err) {
			          console.log("WebSocket连接失败：" + err);
			        }
			      });
			
			      ws.onOpen(function() {
			        console.log("WebSocket连接已打开");
			      });
			
			      ws.onMessage(function(message) {
			        console.log("接收到服务器消息：", message.data);
			      });
			
			      ws.onError(function(err) {
			        console.log("WebSocket错误：" + err);
			      });
			
			      ws.onClose(function() {
			        console.log("WebSocket连接已关闭");
			        setTimeout(function() {
			          this.WebsocketConnect();
			        }, 3000);
			      });
			    }
		}
	}
</script>

<style>
.sidebar-page{
	height: 100%;
	margin: 0;
	display: flex; /*我设置的目的z只是为了让historys占满剩余高度*/
	flex-direction: column;
}
.login{
	display: flex;
	justify-content: center;
	flex-direction:column;/*水平居中*/
	align-items: center; /* 垂直居中 */
	height: 200rpx;
}

.login .image{
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	box-shadow: 0 0 2px gray;
}
.nav-item {
  margin: 10rpx auto;
  display: flex;
  padding: 10px;
  color: #fff;
  height: 30rpx;
  width: auto;
  text-decoration: none;

}
.nav-item .image{
	margin: auto 20rpx;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	box-shadow: 0 0 2px gray;
}
.historys{
	display: flex;
	flex-direction: column;
	margin-top: 100rpx;
	flex-grow: 1;/*占满剩余高度*/
}
.historys.SessionTitle {
    font-size: 14px; /* 标题字体大小 */
    font-weight: bold; /* 加粗 */
}

.historys .SessionTime {
	
    font-size: 12px; /* 时间字体大小 */
    color: #666; /* 字体颜色，可以使用较浅的颜色以区分 */
    margin-top: 4px; /* 在标题和时间之间添加一些间距 */
}
.historys-item{
	display: flex;
	flex-direction: column;
	margin: 40rpx 20rpx;
}
.historys-item:hover{
}
</style>